<template>
  <div v-loading="loading" class="goods-list">
    <sticky :sticky-top="154" :z-index="200">
      <div class="gslt-topnav">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          text-color="#3C4353"
          active-text-color="#1182FB"
          @select="handleSelect"
        >
          <el-menu-item index="1">基本信息</el-menu-item>
          <el-menu-item index="2">销售信息</el-menu-item>
          <el-menu-item index="3">图文描述</el-menu-item>
          <el-menu-item index="4">支付方式</el-menu-item>
        </el-menu>
      </div>
    </sticky>
    <div class="gslt-simpleinfo">
      <h3 id="gsltSimpleinfo" class="gslt-everynav">基本信息</h3>
      <simpleInfo
        :getdata="getData"
        @listenEven="typeInfo"
        @getSimpleInfo="getSimpleInfo"
        @getTpyeChecked="getTpyeChecked"
      />
    </div>
    <div class="gslt-saleinfo">
      <h3 id="gsltSaleinfo" class="gslt-everynav">销售信息</h3>
      <saleInfo
        :getdata="getData"
        :specifications="specifications"
        :typechecked3="typeChecked"
        @getSaleInfo="getSaleInfo"
      />
    </div>
    <div class="gslt-pictureDes">
      <h3 id="gsltPictureDes" class="gslt-everynav">图文描述</h3>
      <pictureDes :getdata="getData" @getPictureDes="getPictureDes" />
    </div>
    <div class="gslt-payWay">
      <h3 id="gsltPayWay" class="gslt-everynav">支付方式</h3>
      <payWay :getdata="getData" @getPayWayInfo="getPayWayInfo" />
    </div>
    <div class="gslt-footer">
      <router-link to="/goods/list">返回</router-link>
      <a v-if="handleEdit&&handleEdit.length > 1?true:false" @click="sendGoodsInfoChange()">编辑商品信息</a>
      <a v-else @click="sendGoodsInfo()">发布商品信息</a>
    </div>
  </div>
</template>
<script>
import simpleInfo from './components/AddProduct/SimpleInfo';
import saleInfo from './components/AddProduct/SaleInfo';
import pictureDes from './components/AddProduct/PictureDes';
import payWay from './components/AddProduct/PayWay';
import sticky from '@/components/Sticky';
import { addMdse, getonebyid, updateMdse } from '@/api/goods';
import { mapGetters } from 'vuex';
export default {
  components: {
    simpleInfo,
    saleInfo,
    pictureDes,
    payWay,
    sticky
  },
  data() {
    return {
      msg: '商品管理',
      activeIndex: '1',
      position: [],
      specifications: [],
      flag_simple: -1,
      flag_saleinfo: -1,
      flag_picture: -1,
      flag_pay: -1,
      sendData: {
        simpleInfo: [],
        saleInfo: [],
        pictureDes: [],
        payWay: []
      },
      typeChecked: '',
      // 详情模式--------
      handleEdit: '', // 状态判断是否进入编辑详情模式
      content: {},
      span: [],
      getData: {},
      // loading
      loading: false,
      id: ''
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  mounted() {
    this.position[0] = document.getElementById('gsltSimpleinfo').offsetTop - 40;
    this.position[1] = document.getElementById('gsltSaleinfo').offsetTop - 40;
    this.position[2] = document.getElementById('gsltPictureDes').offsetTop - 40;
    this.position[3] = document.getElementById('gsltPayWay').offsetTop - 40;
    this.position[4] = document.body.scrollHeight;
    window.addEventListener('scroll', this.handleScroll, false); // 监听（绑定）滚轮滚动事件
  },
  created() {
    this.handleEdit = sessionStorage.getItem('handleEdit');
    if (this.handleEdit && this.handleEdit.length > 1) {
      this.flag_simple = 1;
      this.flag_saleinfo = 1;
      this.flag_picture = 1;
      this.flag_pay = 1;
      this.getDetail();
    }
  },
  beforeDestroy() {
    sessionStorage.setItem('handleEdit', 0);
  },
  methods: {
    handleSelect(key, keyPath) {
      this.position[0] =
        document.getElementById('gsltSimpleinfo').offsetTop - 40;
      this.position[1] = document.getElementById('gsltSaleinfo').offsetTop - 40;
      this.position[2] =
        document.getElementById('gsltPictureDes').offsetTop - 40;
      this.position[3] = document.getElementById('gsltPayWay').offsetTop - 40;
      this.position[4] = document.body.scrollHeight;
      document.documentElement.scrollTop = this.position[key - 1];
    },
    handleScroll() {
      // eslint-disable-next-line for-direction
      for (let i = 0; i < this.position.length + 1; i++) {
        if (document.documentElement.scrollTop < this.position[i + 1]) {
          this.activeIndex = `${i + 1}`;
          return;
        }
      }
    },
    // 监听子组件基本信息type
    typeInfo(value) {
      this.specifications = value.data;
    },
    // 获取三级分类ID
    getTpyeChecked(value) {
      this.typeChecked = value;
    },
    // 获取基本信息数据
    getSimpleInfo(value) {
      if (value === -1) {
        this.flag_simple = -1;
        this.sendData.simpleInfo = [];
        return;
      } else if (value === -2) {
        this.sendData.simpleInfo = [];
        this.flag_simple = -1;
        this.$message.error('商品名已经重复！');
      } else {
        this.sendData.simpleInfo = value;
        this.flag_simple = 1;
      }
    },
    // 获取销售信息数据
    getSaleInfo(value) {
      if (value === -1) {
        this.flag_saleinfo = -1;
        this.sendData.saleInfo = [];
        this.$message.error('有库存的情况价格不能为空！');
        return;
      } else {
        this.sendData.saleInfo = value;
        this.flag_saleinfo = 1;
      }
    },
    // 获取图文描述数据
    getPictureDes(value) {
      if (value === -1) {
        this.flag_picture = -1;
        this.sendData.pictureDes = [];
        return;
      } else {
        this.sendData.pictureDes = value;
        this.flag_picture = 1;
      }
    },
    // 获取支付方式数据
    getPayWayInfo(value) {
      if (value === -1) {
        this.flag_pay = -1;
        this.sendData.payWay = [];
        this.$message.error('支付方式请设置运费！');
        return;
      } else {
        this.flag_pay = 1;
        this.sendData.payWay = value;
      }
    },
    // 点击发布商品信息
    sendGoodsInfo() {
      if (
        this.flag_simple === 1 &&
        this.flag_saleinfo === 1 &&
        this.flag_picture === 1 &&
        this.flag_pay === 1
      ) {
        const item = this.sendData;
        for (const da of item.saleInfo) {
          da.unitPrice = da.unitPrice * 100;
        }
        const param = {
          shopId: this.shopInfo.id,
          typeId: item.simpleInfo.type.typeCheck3, // 商品分类
          name: item.simpleInfo.name, // 商品名字
          brand: item.simpleInfo.shopParameterLeft[0].value, // 品牌
          genre: item.simpleInfo.shopParameterRight[0].value, // 类别
          property: item.simpleInfo.shopParameterLeft[1].value, // 型号
          material: item.simpleInfo.shopParameterRight[1].value, // 材质
          producer: item.simpleInfo.shopParameterLeft[2].value, // 产地
          usage: item.simpleInfo.shopParameterRight[2].value, // 使用场景
          propety: item.saleInfo, // 规格参数组合传递
          image: item.pictureDes.pictureDesList.join(','), // 商品缩略图
          remarks: item.pictureDes.introduce, // 商品描述
          mdseType: item.payWay.TransactionMode, // 付款方式 0全款 1分期
          ratio: item.payWay.beforePayValue, //  预付款
          endDay: item.payWay.endMoneyValue, // 二期天数
          freight: parseFloat(item.payWay.paywayFare) * 100, // 运费
          mainProduct: item.payWay.mainProduct ? '00300002' : '00300001', // 主打产品
          mdseStatus:
            item.payWay.type === 1
              ? '00200001'
              : item.payWay.type === 2
                ? '00200003'
                : null // 上架设置
        };
        addMdse(param).then(res => {
          if (res.code === '0000') {
            this.$message.success('添加商品成功');
          }
          this.$router.push('/goods/list');
        });
      }
      if (this.flag_simple === -1) {
        this.$message.warning('请检测基本信息是否填写完整！');
        return;
      }
      if (this.flag_saleinfo === -1) {
        this.$message.warning('请检测销售信息是否填写完整！');
        return;
      }
      if (this.flag_picture === -1) {
        this.$message.warning('请检测图文描述是否填写完整！');
        return;
      }
      if (this.flag_pay === -1) {
        this.$message.warning('请检测支付方式是否填写完整！');
        return;
      }
    },
    // 点击编辑商品信息
    sendGoodsInfoChange() {
      if (
        this.flag_simple === 1 &&
        this.flag_saleinfo === 1 &&
        this.flag_picture === 1 &&
        this.flag_pay === 1
      ) {
        const item = this.sendData;
        for (const da of item.saleInfo.table) {
          da.unitPrice = da.unitPrice * 100;
        }
        const param = {
          id: this.id,
          name: item.simpleInfo.name, // 商品名字
          brand: item.simpleInfo.shopParameterLeft[0].value, // 品牌
          genre: item.simpleInfo.shopParameterRight[0].value, // 类别
          property: item.simpleInfo.shopParameterLeft[1].value, // 型号
          material: item.simpleInfo.shopParameterRight[1].value, // 材质
          producer: item.simpleInfo.shopParameterLeft[2].value, // 产地
          usage: item.simpleInfo.shopParameterRight[2].value, // 使用场景
          propety: item.saleInfo.table, // 规格参数组合传递
          image: item.pictureDes.pictureDesList.join(','), // 商品缩略图
          remarks: item.pictureDes.introduce, // 商品描述
          freight: parseFloat(item.payWay.paywayFare) * 100, // 运费
          mainProduct: item.payWay.mainProduct ? '00300002' : '00300001', // 主打产品
          mdseStatus:
            item.payWay.type === 1
              ? '00200001'
              : item.payWay.type === 2 ? '00200003' : '00200002' // 上架设置
        };
        updateMdse(param).then(res => {
          if (res.code === '0000') {
            this.$message.success('编辑商品成功');
          }
          this.$router.push('/goods/list');
        });
      }
      if (this.flag_simple === -1) {
        this.$message.warning('请检测基本信息是否填写完整！');
        return;
      }
      if (this.flag_saleinfo === -1) {
        this.$message.warning('请检测销售信息是否填写完整！');
        return;
      }
      if (this.flag_picture === -1) {
        this.$message.warning('请检测图文描述是否填写完整！');
        return;
      }
      if (this.flag_pay === -1) {
        this.$message.warning('请检测支付方式是否填写完整！');
        return;
      }
    },
    getDetail() {
      this.loading = true;
      getonebyid({ id: this.handleEdit }).then(res => {
        this.content = res.data.mdse;
        // this.historyList = res.data.operation;
        const item = {
          simpleInfo: {
            shopParameterLeft: [
              {
                name: '品牌'
              },
              {
                name: '型号'
              },
              {
                name: '产地'
              }
            ],
            shopParameterRight: [
              {
                name: '类别'
              },
              {
                name: '材质'
              },
              {
                name: '使用场景'
              }
            ],
            type: { typeCheck1: '', typeCheck2: '', typeCheck3: '' }
          },
          saleInfo: {},
          pictureDes: {},
          payWay: {}
        };
        const data = res.data.mdse;
        for (const da of data.propety) {
          da.unitPrice = da.unitPrice / 100;
        }
        const type = res.data.span.split(',');
        item.simpleInfo.type.typeCheck1 = type[0];
        item.simpleInfo.type.typeCheck2 = type[1];
        item.simpleInfo.type.typeCheck3 = type[2];
        item.simpleInfo.name = data.name;
        item.simpleInfo.shopParameterLeft[0].value = data.brand;
        item.simpleInfo.shopParameterLeft[1].value = data.property;
        item.simpleInfo.shopParameterLeft[2].value = data.producer;
        item.simpleInfo.shopParameterRight[0].value = data.genre;
        item.simpleInfo.shopParameterRight[1].value = data.material;
        item.simpleInfo.shopParameterRight[2].value = data.usage;
        item.saleInfo.table = data.propety;
        item.saleInfo.propertys = res.data.propertys;
        item.pictureDes.pictureDesList = data.image.split(',');
        item.pictureDes.introduce = data.remarks;
        item.payWay.TransactionMode = data.mdseType;
        item.payWay.beforePayValue = data.ratio;
        item.payWay.endMoneyValue = data.endDay;
        item.payWay.paywayFare = parseFloat(data.freight) / 100;
        item.payWay.mainProduct = data.mainProduct === '00300002';
        item.payWay.type = data.mdseStatus === '00200001' ? 1 : data.mdseStatus === '00200003' ? 2 : 3;
        item.saleInfo.propertys = item.saleInfo.propertys.map(value => {
          return {
            propertys: value.propertys,
            propertyValue: value.propertyValues.map(item => {
              return { item: item };
            })
          };
        });
        this.id = data.id;
        this.getData = item;
        this.sendData = item;
        this.loading = false;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.goods-list {
  width: 100%;
  position: relative;
  .gslt-topnav {
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
    .el-menu {
      .el-menu-item {
        height: 60px;
        margin: 0 13px;
        font-size: 16px;
        font-weight: 500;
      }
    }
  }
  .gslt-simpleinfo {
    background-color: #fff;
    margin-bottom: 10px;
  }
  .gslt-saleinfo {
    width: 100%;
    background: rgba(255, 255, 255, 1);
    box-shadow: 3px 20px 30px 0px rgba(198, 209, 218, 0.08);
    border-radius: 2px;
    margin-bottom: 10px;
  }
  .gslt-pictureDes {
    width: 100%;
    height: 755px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 3px 20px 30px 0px rgba(198, 209, 218, 0.08);
    border-radius: 2px;
    margin-bottom: 10px;
  }
  .gslt-payWay {
    width: 100%;
    background: rgba(255, 255, 255, 1);
    box-shadow: 3px 20px 30px 0px rgba(198, 209, 218, 0.08);
    border-radius: 2px;
    margin-bottom: 20px;
  }
  .gslt-footer {
    background-color: #fff;
    display: flex;
    justify-content: center;
    padding: 16px 0 13px 0;
    margin-bottom: 150px;
    a {
      display: inline-block;
      width: 104px;
      height: 40px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(217, 217, 217, 1);
      border-radius: 5px;
      text-align: center;
      line-height: 40px;
      margin-right: 20px;
      font-size: 14px;
      user-select: none;
    }
    a:nth-child(2) {
      width: 120px;
      height: 40px;
      background: rgba(17, 130, 251, 1);
      font-size: 14px;
      color: rgba(255, 255, 255, 1);
      font-weight: 400;
      border-radius: 5px;
      text-align: center;
      line-height: 40px;
    }
  }
}
.gslt-everynav {
  height: 60px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(60, 67, 83, 1);
  line-height: 24px;
  line-height: 60px;
  padding: 0 33px;
  margin: 0;
  border-bottom: 1px solid #e9e9e9;
}
</style>
